<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>裂变营销</title>
</head>
<style>
    .form-horizontal .form-group.wu-margin {
        margin-left: 0;
        margin-right: 0;
    }

    .wu-pos-b {
        box-sizing: border-box;
        width: 365px;
        left: auto;
        right: 0;
        top: 167px;
    }

    .calcH59 {
        /*定位距离*/
        padding-top: 39px;
        /*Standard */
        height: calc(100% - 59px);
        /*Firefox*/
        height: -moz-calc(100% - 59px);
        /*chrome safari*/
        height: -webkit-calc(100% - 59px);

    }

    .calcH32 {
        /*定位距离*/
        /*padding-top: 43px;*/
        /*Standard */
        height: calc(100% - 32px);
        /*Firefox*/
        height: -moz-calc(100% - 32px);
        /*chrome safari*/
        height: -webkit-calc(100% - 32px);

    }
    .wu-cash{
        height: 110px;
        margin: 10px;
        background: #f97c33;
        /* border: 1px solid #969594; */
        border-radius: 5px;
        box-shadow: 1px 1px 5px #999;
        -webkit-box-shadow: 1px 1px 5px #999;
        -moz-box-shadow: 1px 1px 5px #999;
    }
    .wu-cash>div{
        float: left;
        height: 100%;
        width: 35%;
        position: relative;
    }
    .wu-cash>div.cashDetail{
        width: 60%;
        margin-left: 3%;
    }
    .wu-cash p{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
    .wu-size{
        font-size: 4rem;
    }
    .cashUl{
        padding-top: 10px;
    }
    .cashUl>li{
        margin-bottom: 3px;
    }
    .cashUl>li.cashTitle{
        font-size: 1.8rem;
        font-weight: 600;
        font-weight: bold;
    }
    .calcH32 .row{
        margin-right: 0;
        margin-left: 0;
    }
    .wu-fixed{
        background:#fff;
        padding-top: 11px;
        position: fixed;
        width: 100%;
        overflow: hidden;
        z-index: 999;
    }
</style>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页
    <span class="c-gray en">&gt;</span>
    光速洗车
    <span class="c-gray en">&gt;</span>
    服务管理
    <span class="c-gray en">&gt;</span>
    服务配置
</nav>
<div class="page-container calcH59">
    <div id="tab_autoservice" class="HuiTab" style="height: 100%;">
        <div class="tabBar clearfix wu-fixed " style="display: none;">
        </div>
        <!--****************基本配置***************-->
        <div class="tabCon pos-r calcH32">
            <div>
                <div class="pt-20" style="height: 100%;">
                    <!--************配置信息************-->
                    <div class="form-unit">配置信息</div>
                    <div class="row">
                        <div id="autoServiceConfigTableToolbar2">
                            <button  class="btn btn-primary radius"
                                     data-toggle="modal"
                                     data-target=".autoService-type-modal"
                                     onclick="platformMerchantAutoServiceConfigFun.autoServicePackage_click()">
                                <i class="Hui-iconfont">&#xe600;</i>
                                增加
                            </button>
                        </div>
                        <div class="col-xs-12">
                            <table id="autoServicePackage" class="table table-bordered table-striped text-center"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<!--******************增加配置模态框****************-->
<div class="modal fade autoService-type-modal" tabindex="-1" role="dialog" id="autoServicePackage-modal">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title adOredit">增加</h4>
            </div>
            <div class="modal-body">
                <form action="" method="post" class="form form-horizontal" id="autoServicePackage-form">
                    <input style="display: none;" id="autoService-shopId" name="shopId"/>
                    <input style="display: none;" id="autoService-bizShopPackage" name="bizShopPackage"/>

                    <div class="form-group">
                        <label class="control-label col-xs-4 col-sm-3"><span class="c-red"></span>服务名称：</label>
                        <div class="formControls col-xs-4 col-sm-4">
                            <input type="text" class="form-control" value="" placeholder="必填项" id="autowashName" name="autowashName">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-4 col-sm-3"><span class="c-red"></span>服务价格：</label>
                        <div class="formControls col-xs-4 col-sm-4">
                            <input type="text" class="form-control" value="" placeholder="必填项" id="autowashPrice" name="price">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-4 col-sm-3"><span class="c-red"></span>支持卡的类型：</label>
                        <div class="formControls col-xs-4 col-sm-4 skin-minimal">
                            <label for="servicetype-1" class="checkbox-inline">
                                <input type="checkbox" id="servicetype-1" name="isCard" value="1">年卡
                            </label>
                            <label for="servicetype-2" class="checkbox-inline">
                                <input type="checkbox" id="servicetype-2" name="isCard" value="2">次卡
                            </label>
                            <label for="servicetype-3" class="checkbox-inline">
                                <input type="checkbox" id="servicetype-3" name="isCard" value="3">抵用券
                            </label>
                            <label for="servicetype-4" class="checkbox-inline">
                                <input type="checkbox" id="servicetype-4" name="isCard" value="4">内饰清洗券
                            </label>
                            <label for="servicetype-5" class="checkbox-inline">
                                <input type="checkbox" id="servicetype-5" name="isCard" value="5">龙卡清洗券
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-4 col-sm-3"><span class="c-red"></span>是否支持洗车机：</label>
                        <div class="formControls col-xs-4 col-sm-4 skin-minimal">
                            <label for="sortNo-1" class="radio-inline">
                                <input type="radio" id="sortNo-1" name="sortNo" value="1" checked="checked">是
                            </label>
                            <label for="sortNo-2" class="radio-inline">
                                <input type="radio" id="sortNo-2" name="sortNo" value="2">否
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-4 col-sm-3"><span class="c-red"></span>附赠礼包：</label>
                        <div class="formControls col-xs-4 col-sm-4">
                            <input type="text" style="width:100%;" class="form-control" placeholder="" name="packageId" id="packageId">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button onclick="platformMerchantAutoServiceConfigFun.autoServicePackageAdd()" type="button" class="btn btn-primary">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>

        </div>
    </div>
</div>
<script>
    /*光速洗车服务配置 platformMerchantAutoServiceConfigFun*/
    var platformMerchantAutoServiceConfigFun;
    var shopId = sessionStorage.getItem("autoService-shopId");
    platformMerchantAutoServiceConfigFun = {
        init: function () {

            let self = this;
            self.bootstrapvalidatorForm();

            $("#tab_autoservice").Huitab({
                index: 0
            });

            self.loadautoServicePackage(shopId);
            self.loadgiftPackage(shopId);

        },
        renderTemp:function (tempId,data) {
            /*data为数组格式*/
            let dataObj = {modelList : data};
            return template(tempId,dataObj)
        },
        //加载table信息
        loadautoServicePackage : function (shopId) {
            let self = this;
            /*********信息***************/
            $('#autoServicePackage').bootstrapTable({
                url: 'biz/getAutoWashService?shopId='+shopId,         //请求后台的URL（*）
                method: 'get',
                toolbar: '#autoServiceConfigTableToolbar2',                //工具按钮用哪个容器
                toolbarAlign : "left",
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,                       //初始化加载第一页，默认第一页
                pageSize: 10,                       //每页的记录行数（*）
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                //search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                strictSearch: true,
                //minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                // height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
                singleSelect : true,
                columns: [
                    {
                        field: 'bizShopPackage',
                        title: 'ID',
                        visible: false
                    }, {
                        field: 'shopName',
                        title: '门店名称'
                    },{
                        field: 'autowashName',
                        title: '服务名称'
                    },
                    {
                        field: 'price',
                        title: '服务价格',
                        formatter:function(value,row,index){
                            if(value != null){
                                return value/100;
                            }
                        }
                    },{
                        field: 'isCard',
                        title: '支持卡的类型'
                    }
                    ,{
                        field: 'ruleName',
                        title: '附赠礼包'
                    },
                    {
                        field: 'addTime',
                        title: '创建时间'
                    }, {
                        field: 'address',
                        title: '操作',
                        formatter : function (value, row,index) {
                            return `
                        <a class="btn btn-success btn-sm" type="button"
                           onclick="platformMerchantAutoServiceConfigFun.update_autoServicePackage('${row.bizShopPackage}')">修改</a>
                        <a class="btn btn-default btn-sm" onclick="platformMerchantAutoServiceConfigFun.del_autoServicePackage('${row.bizShopPackage}')">删除</a>
                    `;
                        }
                    }
                ],

            });
        },
        loadgiftPackage:function(shopId){

            $("#autoService-shopId").val(shopId);
            //加载附赠礼包
            $.ajax({
                type: "GET",
                url: "mkt/showPackagesRemoveDisable",
                dataType: "json",
                success: function (data) {
                    $("#packageId").select2({
                        data: data,
                        placeholder: '请选择'
                    });
                    $('#packageId').on('select2:select', function (e) {
                        $(e.target).siblings('I').removeClass('glyphicon glyphicon-remove').addClass('glyphicon glyphicon-ok').show().siblings('SMALL').hide().parents('.form-group').removeClass('has-error').addClass('has-success')
                    });
                    $('#packageId').on('select2:unselect', function (e) {
                        $(e.target).siblings('I').removeClass('glyphicon glyphicon-ok').addClass('glyphicon glyphicon-remove').show().siblings('SMALL').show().parents('.form-group').removeClass('has-success').addClass('has-error')
                    });
                },
                error: function () {
                    alert("error");
                }
            });
        },
        //增加服务
        autoServicePackageAdd : function () {
            let _this = this;
            //bootstrap验证
            var bootstrapValidator = $("#autoServicePackage-form").data('bootstrapValidator');
            bootstrapValidator.validate();
            if(bootstrapValidator.isValid())
                $("#autoServicePackage-form").submit();
            else return;
            //将元转为分
            var temp = $("#autoServicePackage-form").serializeArray();
            for(var i =0;i<temp.length;i++){
                if(temp[i].name == 'price'){
                    temp[i].value = temp[i].value*100;
                }
            }
            var isEdit=$('.adOredit').html()
            if(isEdit=="添加"){
                $.ajax({
                    type: "get",
                    url: "biz/insertAutoWashService",
                    data:temp,
                    dataType: "json",
                    success : function(data) {
                        if(data.state){
                            layer.msg(data.message, {icon: 1});
                            //涮新table，关闭窗体
                            _this.reloadBootstrapTable("/biz/getAutoWashService?shopId="+shopId,"autoServicePackage");
                            $('#autoServicePackage-modal').modal('hide')

                            return true;
                        }else {
                            layer.msg("新增失败！", {icon: 2});
                            return false;
                        }

                    },
                    error:function () {
                        alert("error");
                    }
                });
            }else if(isEdit=="编辑"){
                $.ajax({
                    type: "get",
                    url: "biz/updateAutoWashService",
                    data:temp,
                    dataType: "json",
                    success : function(data) {
                        if(data.state){
                            layer.msg(data.message, {icon: 1});
                            //涮新table，关闭窗体
                            _this.reloadBootstrapTable("/biz/getAutoWashService?shopId="+shopId,"autoServicePackage");
                            $('#autoServicePackage-modal').modal('hide')

                            return true;
                        }else {
                            layer.msg("修改失败！", {icon: 2});
                            return false;
                        }

                    },
                    error:function () {
                        alert("error");
                    }
                });
            }

        },
        //重新加载bootstrapTable的公共方法
        reloadBootstrapTable : function (url,tableId) {
            $.ajax({
                type: "get",
                url: "/back"+url,
                dataType: "json",
                success: function (json) {
                    $("#"+tableId).bootstrapTable('load', json);
                }
            })
        },
        //点击增加，清空文本框
        autoServicePackage_click : function () {
            $('.adOredit').html('添加')
            $('#autoService-bizShopPackage').val("");
            $("#autowashName").val("");
            $("#autowashPrice").val("");
            $('input:radio').eq(0).prop("checked",true);
            $('input:checkbox').each(function () {
                $(this).attr('checked',false);
            });


            //重置validator
            $("#autoServicePackage-form").data('bootstrapValidator').resetForm();
        },
        //编辑数据展示
        update_autoServicePackage:function(bizShopPackage){
            bizShopPackage=bizShopPackage;
            let _this = this;
            $.ajax({
                type: "get",
                url: "biz/getAutoWashServiceById?bizShopPackage="+bizShopPackage,
                dataType: "json",
                success: function (data) {
                    if (data.state) {
                        $('.autoService-type-modal').modal("show");
                        var data=data.data;
                        $('.adOredit').html('编辑')
                        $('#autoService-bizShopPackage').val(data.bizShopPackage);
                        $("#autowashName").val(data.autowashName);
                        $("#autowashPrice").val(data.price/100);
                        //选中单选框的值
                        $('input:radio').eq(data.sortNo-1).prop("checked",true);

                        //取消所有勾选的复选框
                        $('input:checkbox').each(function () {
                            $(this).attr('checked',false);
                        });
                        var isCardList=data.isCard.split(",");
                        //复选框复值选中
                        if(isCardList[0]!=0){
                            for(var i=0;i<isCardList.length;i++){
                                $('input[name="isCard"]').eq(isCardList[i]-1).attr('checked', true);
                            }
                        }
                        platformMerchantAutoServiceConfigFun.loadgiftPackage(shopId);
                        var packSelect = $("#packageId").select2();    //获取selectid
                        packSelect.val(data.packageId).trigger("change");    //设置 value 为four的 option 为选中状态

                    } else {
                        return false;
                    }
                },
                error: function () {
                    layer.msg('错误！', {icon: 2});
                    return false;
                }
            });
        },
        //删除一个
        del_autoServicePackage : function (index) {
            let _this = this;
            layer.confirm('确认要删除吗？',
                {
                    btn: ['确定', '取消']
                },
                function () {
                    //确认删除
                    $.ajax({
                        type: "get",
                        url: "biz/delAutoWashService?bizShopPackage="+index,
                        dataType: "json",
                        success: function (data) {
                            //state为true，删除成功
                            if (data.state) {
                                layer.msg(data.message, {icon: 1});

                                //涮新table
                                _this.reloadBootstrapTable("/biz/getAutoWashService?shopId="+shopId,"autoServicePackage");

                                return true;
                            } else {
                                layer.msg("删除失败！", {icon: 2});
                                return false;
                            }
                        },
                        error: function () {
                            layer.msg('错误！', {icon: 2});
                            return false;
                        }
                    });

                },
                function () {
                    layer.msg('已取消！', {icon: 1});
                    return false;
                }
            );

        },

        //bootstrap验证
        bootstrapvalidatorForm: function () {

            $('#autoServicePackage-form').bootstrapValidator({
                message: 'This value is not valid',
                excluded : [':disabled'],
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    autowashName: {
                        validators: {
                            notEmpty: {
                                message: '服务名称不能为空'
                            },
                            stringLength: {
                                min: 2,
                                max: 100,
                                message: '服务名称长度必须在2到100位之间'
                            }
                        }
                    },
                    price: {
                        validators: {
                            notEmpty: {
                                message: '服务价格不能为空'
                            },
                            regexp: {
                                regexp: /^((^([1-9]\d*))|^0)(\.\d{1,2})?$|(^[-]0\.\d{1,2}$)$/,
                                message: '服务价格格式不正确'
                            }
                        }
                    },
                    packageId: {
                        validators: {
                            notEmpty: {
                                message: '附赠礼包不能为空'
                            }
                        }
                    }


                }
            });
        }

    };
    platformMerchantAutoServiceConfigFun.init();
</script>
</body>
</html>